<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form ref="form" :model="userInfo" :rules="rules" label-width="120px">
      <!--工号 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="工号：" prop="workNumber" label-width="120px">
            <el-input v-model="userInfo.workNumber" style="width: 300px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 工号 入职时间 -->
          <el-form-item
            label="入职时间："
            prop="timeOfEntry"
            label-width="120px"
          >
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              class="inputW"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工姓名 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="username" label-width="120px">
            <el-input v-model="userInfo.username" style="width: 300px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 部门 -->
          <el-form-item label="部门" prop="departmentName" label-width="120px">
            <el-input v-model="userInfo.departmentName" style="width: 300px" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工手机号 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机：" prop="mobile" label-width="120px">
            <el-input v-model="userInfo.mobile" style="width: 300px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 聘用形式： -->
          <el-form-item label="聘用形式：" prop="formOfEmployment">
            <el-select
              v-model="userInfo.formOfEmployment"
              placeholder="请选择活动区域"
            >
              <el-option label="正式" :value="1" />
              <el-option label="非正式" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工照片 -->
      <el-form-item label="员工头像：" class="avatar" label-width="120px">
        <!-- <div class="demo-fit">
          <el-avatar
            shape="square"
            :size="150"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          />
        </div> -->
        <!-- 图片上传 -->
        <UploadImg v-model="userInfo.staffPhoto" />
      </el-form-item>
      <div class="avatartext">图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</div>
      <el-form-item class="buttom">
        <el-button @click="retrogress">返回</el-button>
        <el-button type="primary" @click="onSubmit">保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
import { getUserDetailById } from '@/api/user.js'
import { saveUserDetailById } from '@/api/employees.js'
import EmployeeEnum from '@/constant/employees.js'
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      userId: this.$route.query.id,
      userInfo: {},
      // 表单校验
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadUserDetailById()
  },
  methods: {
    // 获取用户基本信息
    async loadUserDetailById() {
      try {
        const { data } = await getUserDetailById(this.userId)
        console.log(data)
        this.userInfo = data
        this.$message.success('获取成功')
      } catch (error) {
        this.$message.error('获取失败')
        console.log(error)
      }
    },
    // 保存员工基本信息
    async doSave() {
      try {
        this.userInfo['id'] = this.userId
        await saveUserDetailById(this.userInfo)
        // 如果当前操作的是自己的用户则，请求更新头像
        if (this.$store.state.user.userInfo.id === this.userId) {
          // 重新获取用户头像
          await this.$store.dispatch('user/getUserInfo').catch(err => err)
        }
        this.$message.success('更新成功')
        // 回到列表页
        this.$router.back()
      } catch (error) {
        this.$message.error('更新失败')
        console.log(error)
      }
    },
    // 更新用户信息
    onSubmit() {
      this.$refs.form.validate(valid => {
        valid && this.doSave()
      })
    },
    // 回到上一级
    retrogress() {
      this.$router.push(
        `/employees?page=${this.$route.query.page}&size=${this.$route.query.size}`
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  padding: 30px;
  .el-form {
    margin-left: 130px;
    .buttom {
      margin-left: 10px;
    }
    .avatartext {
      font-size: 14px;
      margin: 0 0 40px 40px;
      color: #999999;
    }
  }
}
::v-deep.el-form-item {
  margin-bottom: 10px;
}
::v-deep label {
  font-weight: 400;
}
</style>
